<template>
	<view>
		<view class="top">
			<view class="search">
				<uni-easyinput class="innersearch" prefixIcon="search" v-model="inputvalue" placeholder="搜索加油站"
					@iconClick="searchNearbyStations"></uni-easyinput>
			</view>
			<view class="btn1">
				<button @click="searchNearbyStations">搜索</button>
			</view>
		</view>
		<view class="container">
			<view v-for="(station, index) in stations" :key="index">
				<view @click="goto(stations[index].uid)" class="content">
					<view class="mid">
						<view class="name">{{ station.name }}</view>
						<view class="price">
							<text>{{ station.discount }}</text>
						</view>
						<view class="local">{{ station.address }}</view>
					</view>
					<view class="right">
						<view>{{ station.distance }}</view>
						<view class="img">
							<image src="/static/plane@3x.png" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="more" v-if="stations.length === 0">暂无更多</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputvalue: '', // 用户输入的搜索关键字
				value: '', // 其他选择框的值
				range: [], // 选择框的数据
				stations: [], // 加油站的数据
				location: '', // 替换为实际获取的经纬度
				details: null,
				error: null,
				baseUrl: null,
			};
		},
		created() {
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					// this.longitude = ,res.longitude
					// this.latitude = res.latitude
					this.location = res.latitude+','+res.longitude
					console.log(this.location)
				}
			});
		},
		methods: {
			searchNearbyStations() {
				uni.request({
					url: 'http://localhost:7001/ruoyi-merchant/address/search',
					method: 'GET',
					data: {
						query: '加油站',
						location: '34.832,113.566',
						radius: 50000,
					},
					success: (res) => {
						if (res.data && res.data.results) {
							this.stations = res.data.results; // 假设返回的数据在 results 字段
						} else {
							console.error('Unexpected response structure:', res);
						}
					},
					fail: (error) => {
						console.error('Error fetching nearby stations:', error);
					},
				});
			},
			async fetchDetails(uid) {
				const response = await new Promise((resolve, reject) => {
					uni.request({
						url: `http://localhost:7001/ruoyi-merchant/address/details?uid=${uid}&scope=2`,
						method: 'GET',
						success: (res) => {
							if (res.statusCode === 200) {
								resolve(res.data);
							} else {
								reject(
									`Failed to fetch details. Status code: ${res.statusCode}`);
							}
						},
						fail: (err) => {
							reject(`Request failed: ${err.errMsg}`);
						}
					});
				});
				this.details = response; // 将数据绑定到组件中
				console.log(this.details);
				this.baseUrl = this.details.result.detail_info.detail_url
				console.log(this.baseUrl)
			},
			//跳转
			goto(res) {
				this.fetchDetails(res);
				if (this.baseUrl) {
					window.location.href = this.baseUrl; // 使用变量的值
				} else {
					console.error('No URL available for redirection.');
				}
			}
		}
	};
</script>

<style>
	page {
		background-color: #fff;
	}

	.top {
		display: flex;
	}

	.search {
		width: 80%;
		height: 45px;
	}

	.innersearch {
		width: 98%;
		height: 28px;
		margin: 4px 6px 4px 4px;
	}

	.btn1 button {
		width: 60px;
		height: 35px;
		line-height: 30px;
		font-size: 14px;
		text-align: center;
		color: #fff;
		background-color: #0055ff;
		margin-top: 6px;
		margin-left: 5px;
	}

	.btn2 {
		margin-left: 10px;
		margin-top: 5px;
	}

	.btn2 text {
		font-weight: bold;
	}

	.select {
		width: 80px;
		margin: 10px 25px;
	}

	.content {
		width: 95%;
		height: 97px;
		border: 1px solid #f2f2f2;
		background-color: #fff;
		margin: 3px auto;
		display: flex;
	}

	.name {
		width: 300px;
		height: 25px;
		margin-left: 20px;
		margin-top: 5px;
		font-size: 14px;
		font-weight: bold;
	}

	.local {
		margin-top: 20px;
		margin-left: 20px;
		font-size: 12px;
	}

	.right {
		width: 50px;
		height: 90px;
		color: #0055ff;
	}

	.img image {
		width: 24px;
		height: 24px;
		margin-top: 30px;
		margin-left: 0px;
	}

	.more {
		text-align: center;
		font-size: 15px;
		margin-top: 10px;
	}
</style>